2. SEMANTICS BASICS Flashcards
Assistive technology:
These are tools that are designed to help users whose impairments can prevent them from accessing information technology at all.
Screen readers:
A screen reader is a software application that enables people with severe visual impairments to use a computer.
¿What is assistive technology?
Assistive technology is an umbrella term for a broad range of devices, software and tools that help any person with a disability complete a task.
¿What are affordances?
An “affordance” refers to the possibility of an action on an object; for instance, we say that an elevator button affords being pressed, and a chair affords being sat on.
¿What are affordances for?
Well designed affordances enable people to do something with as little training as possible.
Affordances Examples
- This date field means I should enter the US date.
- A check box is a yes or no option.
- Here, I see I can enter one line of text.
- Radio buttons mean I can choose one option.
- And this button here lets me know it will perform an action.
¿What is to express the semantics of an element?
Is the need we have to make sure that information is expressed in a way which is flexible enough to be accessed programatically by assistive technology. Which can then create an alternative user interface to suit its users needs.
¿What does screen reader does?
Instead of a visual UI, the screen reader provides an auditory interface. A screen reader actually largely creates the user interface for the user based on the programmatically expressed semantics.
¿What information will the screen reader express?
role, name, state, and value:
- Sometimes a screen reader might simply state the element’s role.
- Other times it might play an easily recognizable sound
- To avoid constant repetition. Sometimes it might do both.
- The screen reader will announce an elements name, if it has one.
- It will announce what its value is, if it has one.
- And it will also announce any information it has about an element’s state.
¿Whats I the goal with screen readers users?
Just provide enough information for the screen reader to use. Creating a kind of API describing the page structure.
This is more or less what the browser actually does present to the screen reader.
¿What is the accessibility tree?
It is a modified version of the DOM tree made by the browser into a form which is useful to assistive technology.
About elements names
We need to make sure that we’re making elements name discoverable. Provide text alternatives for any non text content.
But please keep in mind that in the context of role, name, value, and state, the name means the same thing.
¿Which are the two types of labels?
- Visible labels: which are used by all users to associate meaning with an element.
- Text alternatives: are only used when there’s no need for visual labels. A text alternative is usually not visible on the pag.
¿how to create visible and non-visible labels?
Check web aims checklist
About text alternative images
We need to think about what role an image plays in the page to work out what type of text alternative it should have.
¿What is a usablw text alternative?
In order for a string to be a usable text alternative it needs to convey the same thing as the image in the given context.
A way to check whether alt text is sensible:
Imagine all your images are broken. ¿Can you still understand the page content?
Names you don’t want to be pronounce by screen reader:
Use an empty alt text to remove the image from the accessibility tree.
¿Which images should have an alt attribute?
All images should have an alt attribute.
¿Which images should have descriptive text?
Important images should have descriptive alt text that just describes what the image is.
¿Which images should have blank alt text?
Decorative images should have blank alt text. The screen reader will skip them.
¿What happens if I don’t include blank text?
The screen reader may try to read the filename and if the file names weird, it’ll sound weird.
