User Tools

Site Tools


teaching:semantics-and-accessibility

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

teaching:semantics-and-accessibility [2019/01/25 15:35] (current)
seanburns created
Line 1: Line 1:
 +<​markdown>​
 +# Semantics and Accessibility
 +## Date: Wed 16 Jan 2019 
  
 +Hi Class, this week we're going to look at semantics and accessibility.
 +I use the term accessibility as a kind of shorthand -- I also include,
 +broadly, things like usability and inclusion.
 +
 +One of the readings that you have makes distinctions and defines these
 +terms. So, *accessibility* has a distinct definition, as well as the
 +terms *usability* and *inclusion*. Our reading from [w3.org][1] defines
 +*accessibility* as that which:
 +
 +> addresses discriminatory aspects related to equivalent user experience
 +> for people with disabilities,​ including people with age-related
 +> impairments. For the web, accessibility means that people with
 +> disabilities can perceive, understand, navigate, and interact with
 +> websites and tools, and that they can contribute equally without
 +> barriers.
 +
 +And then *usability* is related to *user experience design* or UX
 +design. Usability is:
 +
 +> about designing products to be effective, efficient, and satisfying.
 +> Specifically,​ ISO defines usability as the "​extent to which a product
 +> can be used by specified users to achieve specified goals effectively,​
 +> efficiently and with satisfaction in a specified context of use"
 +
 +Finally, inclusion is referred to sometimes as: 
 +
 +> *Inclusive design*, *universal design*, and *design for all* involves
 +> designing products, such as websites, to be usable by everyone to the
 +> greatest extent possible, without the need for adaptation. Inclusion
 +> addresses a broad range of issues including access to and quality of
 +> hardware, software, and Internet connectivity;​ computer literacy and
 +> skills; economic situation; education; geographic location; and
 +> language — as well as age and disability.
 +
 +Things related to *inclusion* are pretty broadly defined. This can be
 +related to the responsiveness of a website to various displays, such as
 +mobile phones, and then the whole ranges of mobile phones that exist, as
 +well as to desktops, laptops, and tablets, and even to smart watches.
 +
 +In class, we're going to talk about these three things. You're going to
 +identify some websites and rank and judge these sites according to the
 +principles of accessibility,​ usability, and inclusion. ​
 +
 +I'm also going to give you a task to perform, and also provide a link to
 +a short video that you're going to watch from [YouTube][4] that does a
 +really nice job demonstrating all the above issues.
 +
 +These are all really important parts of semantics and accessibility. One
 +of the ways that we will address a lot of these things in class is
 +through HTML. You can think of HTML as the least common denominator in
 +programming languages that we can use to develop websites. For example,
 +HTML offers, which we'll learn more about later, elements that are used
 +to structure and provide content to a website. Sometimes you can do
 +things in JavaScript, PHP, Python, Ruby, etc that you can do just with
 +HTML. One of the goals in meeting accessibility,​ usability, and
 +inclusion issues, is to take advantage of that least common denominator
 +aspect of HTML as much as possible. By this I mean that if you have a
 +choice between a JavaScript (or PHP, Ruby, etc.) function that will
 +perform some task, and you can do the same thing in HTML, then do it in
 +HTML. As soon as we start to make things more complicated and more
 +sophisticated,​ then accessibility,​ usability, and inclusion become
 +easier to break.
 +
 +HTML5, which is what we'll focus on this semester, was specifically
 +developed to be more semantic. I mentioned this in the intro to the
 +course, but we'll talk about semantics in two ways. In short, we'll use
 +HTML semantic elements in this course. That is, we'll use HTML elements
 +that give meaning to a web page because of what the elements are and how
 +they are used. Some [example semantic elements][2] include:
 +
 +- article
 +- aside
 +- figure
 +- footer
 +- header
 +- nav
 +- section
 +- summary
 +- time
 +
 +Attempts to provide semantic data was provided for in previous versions
 +of HTML, like XHTML and HTML4, through other means or through hacks that
 +we not all that ideal, such as excessive use of divs, or through
 +scripting languages. HTML5 great benefit is that it provides semantic
 +elements, such as the article element to section that part of a page
 +that counts as an article. And by doing that, we provide semantic
 +information not just to the user of the site, or to other developers,
 +but also to machines that parse that website for data and information,​
 +such as web crawlers from search engines or to screen readers for people
 +who are visually impaired in some way. Or it can provide text-to-speech
 +advantages also. This is why those semantic elements are important. And
 +there are a lot of them -- over a 100. You won't have to memorize all of
 +these, but there will be ones that you'll use more often, like the ones
 +that I just listed.
 +
 +Link more here: [HTML Elements][3]
 +
 +All right -- I will share a video and the task that we'll do this week.
 +See you on the board.
 +
 +[1]:​https://​www.w3.org/​WAI/​intro/​usable
 +[2]:​https://​developer.mozilla.org/​en-US/​docs/​Glossary/​semantics#​Semantics_in_HTML
 +[3]:​https://​developer.mozilla.org/​en-US/​docs/​Web/​HTML/​Element
 +[4]:​https://​www.youtube.com/​watch?​v=3f31oufqFSM
 +</​markdown>​
teaching/semantics-and-accessibility.txt · Last modified: 2019/01/25 15:35 by seanburns