0:05
Speaker 1: Welcome! Content Lab brings you the next video in our series about accessible content practices for web authors.
0:12
In this video, we'll talk about making sure your content is accessible on all device types.
0:18
Accessibility is about removing barriers for all users.
0:22
Your content should be easy to consume for users on all device types, whether it's desktop, mobile, or tablet, and if they're using assistive technology with their device.
0:32
Almost 50% of people viewing Mass.gov content are on mobile devices.
0:37
Here's a DCR Park page on mobile, for example.
0:40
Notice that in the last 30 days, 65% of users who accessed it were on mobile devices.
0:46
The Mass.gov CMS is responsive, so content is designed to adapt to different types of screens and to work with assistive technology like screen readers.
0:55
You can right-click anywhere on the page and select Inspect and then select the Toggle Device toolbar icon in the Dimensions drop-down.
1:04
You can then choose a device to see how your content looks.
1:08
It's a good practice to check how your page looks on different device types so you can see if anything looks off and then fix it.
1:16
If you don't know how your audiences are consuming your content, you can find out. In the back end of the CMS,
1:22
under the Analytics tab, find the component called Page Views by Device Type.
1:27
You have a responsibility to ensure a good experience when a lot of your audience is using mobile devices.
1:33
To make content more accessible for people on mobile devices, you need to know how components on certain page types in the CMS behave.
1:42
You can't change this behavior, but you can do things to minimize barriers for users.
1:48
A table of contents, like this one, for example, on the Find a Job Info Details page, will be open in desktop view but collapsed in mobile view.
1:58
Note that when a mobile phone user opens the table of contents, it contains a manageable list of headings, and the headings are concise, making it easy to navigate the page on a smaller screen.
2:10
Remember, concise headings are helpful for assistive technology users, and they support cognitive accessibility.
2:18
The Mosaic component on Organization and Service pages has a horizontal layout on desktop, but will appear as stacked boxes on mobile.
2:28
With flexible link groups on service and org pages, you can set them to be expanded or collapsed on page load.
2:35
Whatever you choose is how they will appear on desktop and mobile.
2:40
You should keep your mobile and assistive technology users in mind when you decide how to set your link groups.
2:46
On this paid family and medical leave page, for example, the accordions are expanded on page load.
2:52
Note that each group has a clear, specific heading and not too many links, so navigating through the groups is manageable on mobile.
3:02
Here is a service page where the link groups are collapsed when the page loads.
3:06
This allows the user on mobile to view all the sections on the page at once.
3:12
Alternatively, you could have the most popular link group expanded on page load as this EZ Pass page does, but keep the other link groups collapsed.
3:22
This gives people quick access to popular content and then an overview of the rest of the page.
3:29
If you choose to display links with buttons, you should know that they will appear stacked on mobile view.
3:35
Too many stacked buttons, as we find on this Business Taxes page, make for a very long scroll on mobile.
3:42
To reduce scrolling, use buttons sparingly, as this traffic and travel information page does, to call attention to popular links and then use link groups for less in-demand.
3:53
Content tables are tricky on mobile.
3:57
Keep in mind that users may need to scroll sideways to see everything.
4:01
If you have a lot of columns or text in your table, like this one, it can be harder to read on mobile.
4:07
The fewer columns, the better.
4:09
Here is a three-column table.
4:11
Note that sideways scrolling on mobile is manageable.
4:15
Screen reader users can access the content in tables without scrolling, even on mobile devices, because the technology announces everything in the table.
4:25
You can find out more about accessible tables in our video on that topic.
4:31
For a table with a lot of data, using a searchable CSV where the user can control how many rows display can make for a better experience on mobile.
4:41
Here are some best practices to follow to ensure accessibility on different devices.
4:47
If you know a lot of your audience is on mobile, you should limit downloadable content like PDFs. Downloads use up memory and can be hard to keep track of on mobile devices.
4:59
Here is a page where more than half of the users are on mobile.
5:02
They offered a document download to guide users through an online application.
5:08
That's not a great experience for people on cell phones.
5:12
The more you can convert content from a doc or PDF to HTML, the better, especially since the CMS is designed to help you create accessible content.
5:23
Here's an example of a report presented in both formats.
5:26
You can download the report or read it online.
5:30
Phone numbers and emails should always be linked, so people on mobile can easily tap the link to make a call or write an email.
5:39
To make a phone number into a hyperlink in the CMS, follow this format.
5:43
When you type it in the link field, write, "tel", and then ":", and then the phone number with no dashes and no spaces.
5:52
For e-mail addresses, follow this format:
5:55
When you type it in the link field: "mailto:emailaddress" with no spaces.
6:02
When you apply these practices, you improve the experience for all of your users, no matter what kind of device or assistive technology they're using.
6:10
For more help with accessibility practices, check out the ACCESS team's resources.