User Tools

Site Tools


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 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 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 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

All right -- I will share a video and the task that we'll do this week. See you on the board.

teaching/semantics-and-accessibility.txt · Last modified: 2019/01/25 15:35 by seanburns