Basic considerations to help you get started making your user
interface design and visual design more accessible to people with
disabilities. These tips are good practice to help you meet Web
Content Accessibility Guidelines (WCAG) requirements.
Provide sufficient contrast between foreground and
background
Don’t use color alone to convey information
Ensure that interactive elements are easy to identify
Provide clear and consistent navigation options
Ensure that form elements include clearly associated
labels
Provide easily identifiable feedback
Use headings and spacing to group related content
Create designs for different viewport sizes
Include image and media alternatives in your design
Provide controls for content that starts automatically
Good page titles are particularly important for orientation —
to help people know where they are and move between pages open in
their browser. The first thing screen readers say when the user
goes to a different web page is the page title.
Image text alternatives
(“alt text”)
Text alternatives (“alt text”) convey the purpose of an image,
including pictures, illustrations, charts, etc. Text alternatives
are used by people who do not see the image. (For example, people
who are blind and use screen readers can hear the alt text read
out; and people who have turned off images to speed download or
save bandwidth can see the alt text.)
You don’t usually see the alt text. It is in the web page
markup like this:
<img src="pointer_to_image.png" alt="here's where the alternative text goes">).
Headings
All pages should have headings, marked up properly.
Some people cannot read text if there is not sufficient
contrast between foreground and background.
Resize text
Test you can increase text size
Keyboard access and
visual focus
Many people cannot use a mouse and rely on the keyboard to
interact with the Web. People who are blind and some sighted
people with mobility impairments rely on the keyboard or on
assistive technologies and strategies that rely on keyboard
commands, such as voice input. Accessible websites enable people
to access all content and functionality — links, forms, media
controls, etc. — through a keyboard.
Moving, Flashing,
Blinking Content
Check if there is any moving, blinking, or scrolling
information that starts automatically and lasts more than five
seconds. If there is, check that there is a way for the user to
pause, stop, or hide the movement.
Multimedia alternatives
Captions, descriptions, text transcriptions
Accessibility Principles
Source: Information from W3C Web Accessibility Initiative
(WAI)
Text alternatives are equivalents for non-text content.
Examples include:
Short equivalents for images, including icons, buttons, and
graphics
Description of data represented on charts, diagrams, and
illustrations
Brief descriptions of non-text content such as audio and video
files
Labels for form controls, input, and other user interface
components
Text alternatives convey the purpose of an image or function to
provide an equivalent user experience. For instance, an
appropriate text alternative for a search button would be “search”
rather than “magnifying lens”.
Captions
and other alternatives for multimedia
Text transcripts and captions for audio content, such as
recordings of a radio interview
Audio descriptions, which are narrations to describe important
visual details in a video
Sign language interpretation of audio content, including
relevant auditory experiences
Content can be
presented in different ways
For users to be able to change the presentation of content, it
is necessary that:
Sequences of information or instructions are independent of
any presentation
Browsers and assistive technologies provide settings to
customize the presentation
Content is easier to
see and hear
Distinguishable content is easier to see and hear. Such content
includes:
Color is not used as the only way of conveying information or
identifying content
Default foreground and background color combinations provide
sufficient contrast
When users resize text up to 400% or change text spacing, no
information is lost
Text reflows in small windows (“viewports”) and when users
make the text larger
Images of text are resizable, replaced with actual text, or
avoided where possible
Users can pause, stop, or adjust the volume of audio that is
played on a website
Background audio is low or can be turned off, to avoid
interference or distraction
Operable user
interface and navigation
Functionality is available from a keyboard
Many people do not use the mouse and rely on the keyboard to
interact with the Web. This requires keyboard access to all
functionality, including form controls, input, and other user
interface components.
Users
have enough time to read and use the content
Content
does not cause seizures and physical reactions
Warn users before flashing content is presented, and provide
alternatives
Provide mechanisms to switch off animations, unless they are
essential
Users
can easily navigate, find content, and determine where they
are
Users
can use different input modalities beyond keyboard
Labels presented to users match corresponding object names in
the code, to support activation by voice
Buttons, links, and other active components are large enough
to make them easier to activate by touch
Text is readable and
understandable
Identifying the primary language of a web page, such as
Arabic, Dutch, or Korean
Using the clearest and simplest language possible, or
providing simplified versions
Many
people rely on predictable user interfaces and are disoriented or
distracted by inconsistent appearance or behavior.
Navigation mechanisms that are repeated on multiple pages
appear in the same place each time
User interface components that are repeated on web pages have
the same labels each time
Workshop:
Exploring Web Accessibility Tools
Do Easy
Checks using the above identified first simle steps to
check.
Use the Browser’s Accessibility inspector and Check for
issues.
Get user feedback from the right people and skills. Things
to consider include: age, background, disabilities.
In most cases, including users in evaluation involves: getting
a few people with disabilities - and depending on your target
audience, older users including them throughout the development
process to complete sample tasks on prototypes so you can see how
the different aspects of the design and coding could be improved
discussing accessibility issues with them. –source.
Please pick a research topic of interest to you that relates to
accessibility and interface, broadly interpreted. Create a 3 - 5
minute presentation, no more than 3 - 5 slides, to explain your
topic and relevant information.
Please pick a unique topic. Examples include:
How People with Disabilities use the Web
Designing for older users
p5js and audio accessibility
accessibility and the phone
accessibility and interface in the car
Best practices for web accessibility
Experimental interfaces for accessibility
Operating systems and accessibility
Video game controllers for accessibility
Autism-friendly apps
Apple or Windows accessibility elements
Design methodologies for working with accessibility
issues
Accessibility design for smart watches
Critiques of social media sites for accessibility
How to test whether your website is accessible
Another topic distinct from the above
Please cite at least 2 sources for your information.