[Speaker] Welcome! Content Lab brings you the next video in our
series about accessible content practices for web authors.
In this video, we'll talk about making sure your content is
accessible on all device types.
Accessibility is about removing barriers for all users.
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. Almost 50% of people viewing Mass.gov
content are on mobile devices.
Here's a DCR Park page on mobile, For example.
Notice that in the last 30 days, 65% of users
who accessed it were on mobile devices.
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.
You can right-click anywhere on the page
and select Inspect,
and then select the Toggle Device toolbar icon.
In the Dimensions dropdown,
you can then choose a device to see how your content looks.
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.
If you don't know how your audiences are consuming your
content, you can find out. In the back end
of the CMS under the Analytics tab,
find the component called Page Views
by Device Type. You have a responsibility
to ensure a good experience when a lot
of your audience is on mobile.
To make content more accessible
for people on mobile devices, you need to know
how components on certain page types in the CMS behave.
You can't change this behavior,
but you can do things to minimize barriers for users.
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.
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.
Remember, concise headings are helpful
for assistive technology users
and they support cognitive accessibility.
The Mosaic component on organization
and service pages has a horizontal layout on desktop,
but will appear as stacked boxes on mobile.
With flexible link groups on service
and org pages, you can set them to be expanded
or collapsed on page load.
Whatever you choose is how they will appear in
desktop and mobile.
You should keep your mobile
and assistive technology users in mind when you decide how
to set your link groups. On this Paid Family
and Medical Leave page
for example, the accordions are expanded on page load.
Note that each group has a clear specific heading
and not too many links, so navigating
through the groups is manageable on mobile.
Here is a service page
where the link groups are collapsed when the page loads.
This allows the user on mobile
to view all the sections on the page at once.
Alternatively, you could have the most popular link group
expanded on page load as this EZPass page does,
but keep the other link groups collapsed.
This gives people quick access to popular content
and then an overview of the rest of the page.
If you choose to display links with buttons, you should know
that they will appear stacked on mobile view.
Too many stacked buttons
as we find on this business taxes page, makes
for a very long scroll on mobile.
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 content. Tables are tricky on mobile.
Keep in mind that users may need
to scroll sideways to see everything.
If you have a lot of columns
or text in your table like this one,
it can be harder to read on mobile.
The fewer columns the better. Here is a three column table.
Note that sideways scrolling on mobile is manageable.
Screen reader users can access the content in tables
without scrolling even on mobile devices
because the technology announces everything in the table.
You can find out more about accessible tables in
our video on that topic.
For a table with a lot of data, using a searchable CSV
where the user can control how many rows are displayed, can make
for a better experience on mobile.
Here are some best practices to follow
to ensure accessibility on different devices.
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.
Here is a page where more than half of users are on mobile.
They offered a document download to guide users
through an online application.
That's not a great experience for people on cell phones.
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.
Here's an example of a report presented in both formats.
You can download the report or read it online.
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. To make a phone number into a hyperlink
in the CMS, follow this format.
When you type it in the link field. Write "tel",
and then colon, and then the phone number with no dashes
and no spaces. For email addresses,
Follow this format when you type it in the link field: "mailto",
colon, and the email address with no spaces.
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.
For more help with accessibility practices,
check out the ACCESS team's resources.