Skip to content

Latest commit

 

History

History
119 lines (105 loc) · 4.9 KB

Semantics Basics.md

File metadata and controls

119 lines (105 loc) · 4.9 KB

Accessibility- Semantics Basics

  • How to create websites for users with visual disabilities?
  • How to use HTML effectively to create a good experience for all users?

3. Semantics Basics

a. Assistent Technology

Assistent Technology = all devices, software, and tools, that help any person with a disability complete a task.

  • Examples: screen reader, braille display, magnification,voice controll, switch access, sip & puff, eyetracking, but also robotic devices, browser zoom, customed designed game controller and add-on chrome extension.
  • For all these technologies, programmatic expressed semantics are needed.

b. Affordances

  • Affordances: the qualities (properties) of an object, that defines its use.
  • Examples: buttons, sliders, sroll-downs, playback controls, price limites
  • Choose an option
  • Enter a line of text
  • Enter a specific date
  • Yes/No option
  • Perform an action

c. Role, Name, Value

How to access the visual information of the User Interface (UI)?

  • Information need to be expressed in such a way that it is accesible programmatically by assistence technology.
  • Markup is used in a way that facilitates accesibility, so a Screen reader can provide info for Elements':
  • ROLE= _What type? ex. Edit Text
  • NAME= What name(label)? ex. your e-mail address
  • STATE = What state?
  • VALUE= What value?

SOURCES: WebAim

d. The Accessibility Tree

  • Considering the A11y tree when writing your HTML will help in making your sites more accessible.

  • The browser transforms DOM tree (natively semantic elements or othered with ARIA) into the Accessibility tree (=all information for screenreader: Name, Role, State and Value).

  • It can be done, for much of the DOM has implicit semantic meaning. It uses standard HTML native elements that are automatically recognized by browsers on a variety of platforms. -Using the proper semantic elements will make your life much easier when addressing accessibility concerns.

  • Example:

  • Main

  • Form

  • Radio Button: name= "round trip", state= "selected"

  • Edit Text: name = "full name"

  • Combo box: value= "no preference", name: "Seat type", state= "collapsed"

  • Button: name= "search"

<main>
//<div class= "card">
<form>
  //<div class= "trip selector">
  //<div class= "row">
  //<div class= "inline control col-2">
  <label for="seatType"> SteatType </label>
  <select name="seatType" id= "seatType">
  <option value="0">No preference</option>
  <option value="1">Aisle seat</option>
   <option value="2">Window seat</option>
  </select>
//</div>

   //<div class= "inline control submit-form col-1">
    <button type= "submit" id= "submitBtn">Search</button>
    //</div>
  //</div>
  //</div>
  </form>
//</div>
</main>

NOTE: information will be reduced to the most important information only: Name, Role, State and Value.

e. Semantics in Native HTML

<label>
<input type="radio" checkedName= "tType"  value= "0">
Round Trip
</Label>

SOURCES:

f. Naming, Labeling and Alternative text

  • Using proper labeling not only helps accessibility but it makes the element easier to target for all users!
  • There are 2 ways of labeling form inputs.
  • Element could have a:
  1. visual label (name) name="radio button" or a
<label>
  <input type="radio">
  Check me
</label>
  1. text alternative images.
<input type="radio" id="radio-button">
<label for="radio-button">Check me</label>
  • Using these labeling allows users to toggle the input element by also clicking the label.

Alt text:

  1. Use an alternative text to the image, if not loaded.
  2. Describe what the image about for screen reader.
  3. Logos = assign the company name.
  4. Search icon = empty alt. (This will skip it from accessibility tree.)
  5. Any image meant for decoration = empty alt.
  6. Specify each image's alt attribute in full, e.g. alt="bees".

Takeaway