Web Accessibility is Essential

Something that is vital to the success of a website—but oftentimes people forget about—is web accessibility. Web Accessibility means having your website accessible to people with disabilities. These disabilities can be visual (blindness, color blindness), hearing-related (deafness), motor-related (inability to use a mouse), or cognitive (learning disabilities). It’s important to consider accessibility when building your website, otherwise you’re excluding quite a few people from your target audience! Here I will be listing some basic things that you should consider when designing your website to be accessible, but for further and fuller details on the matter you should check out the sources I’ve linked to at the bottom of the page.

  1. Provide “alt” content for images:
    Add alternative text for non-textual items; for instance, for a photo of roses you can go into the <img src=”roses.jpg” /> tag and add an ‘alt = “Red Roses”‘ attribute inside the tag (so in the end it would look like <img src=”roses.jpg” alt=”Red Roses” />). Doing this will provide text for screen readers, so those who are blind are still able to know what the content is.
  2. Provide clear document structure:
    Not only does having a good document structure important when coding, but it can also be beneficial to those utilizing screen readers. Providing structural elements (headings, lists, navigation, etc.) gives meaning to your content, which makes it easier for users to understand the purpose of each bit of content. For example, having <h1>Roses</h1> tells users that this is likely the main subject of the page.
  3. Make all elements accessible by keyboard:
    Some users do not always have a mouse, and some users may not have the fine motor skills necessary to control a mouse. Therefore, you should aim to have all your website elements accessible through a keyboard and not solely rely on a user having a mouse; having a good document structure can help with this as it allows for users to be able to tab through content.
  4. Provide transcripts for podcasts, video, etc.: 
    For users who have hearing disabilities, they will not be able to listen to your podcasts or videos. Provide a transcript for your audio-based content so that users are able to read the content. Not only will you make your content more accessible to users, but it will actually help boost your website’s ranking in search engines (spiders and bots cannot hear either!).
  5. Do not rely on color alone to convey meaning:
    Color blindness is not uncommon, and so you should try to refrain from making content dependent on color. A warning text (such as <span>Alert:</span>) that only stands out because it is colored red does not make it accessible; you should try adding other styles to help it stand out, such as making it bold, uppercase, AND red.
  6. Provide meaningful headers and captions to content:
    Having appropriate headers and captions can help give content some context in the grand scheme of the webpage. This is particularly important for table elements that rely on data organization (so make sure every column has the correct <th> table header tag).
  7. Make text links sensible: 
    When providing links on your webpage, don’t use link titles such as “Click Here”, “Link” or “More”. Some screen readers skip straight to links, and having titles such as these out-of-context can be very confusing to a user. Aim to have clear and meaningful titles that make sense no matter where you see them, such as “Types of Roses” or “How to Care for Roses” that give a good indication of what page you’re able to navigate to.

As stated before, these are just some very basic tips that you can keep in mind when designing your website to be accessible; there are LOTS more that you can (and should) consider, so I recommend researching more on the topic.

Don’t think of web accessibility as something that only affects disabled users—web accessibility can be beneficial to non-disabled users as well, such as those with slow internet connection, or those who might have a temporary disability, etc. If you’re able to do so, you should aim to provide equal opportunity to all of your users to access your content.

Sources: [ Introduction to Web Accessibility ], [ Accessibility ], [ WebAIM: Introduction to Web Accessibility ], [ What is Web Accessibility? ]

Text Editors for PC: Part 1

Last week I wrote an article comparing three common text editors for Mac computers; as you may have guessed, this week I’ll be doing another quick comparison of three editors, but this time we’ll be looking ones designed for PC computers. Hopefully you will find this information helpful in your decision-making process.

Notepad Notepad++ Sublime Text 2
Price Free Free $70*
Open Source No Yes No
Syntax Highlighting No Yes Yes
Find and Replace Yes Yes Yes
Bracket Matching No Yes Yes
Auto Indention No Yes Yes
Auto Completion No Yes Yes
Spell Checking No Yes Yes

* You must pay a fee for the license, but a free version is available

Notepad: Like TextEdit for Mac, Notepad is a Windows-only application that already exists on most PC computers. Again like TextEdit, its functionality is very basic, lacking a lot of the features that Notepad++ and Sublime both share (such as syntax highlighting, spell checking, etc.). However, it is a very light and fast text editor, making it extremely useful for quick editing. But you shouldn’t use it for large amounts of content creation or coding needed for large-scale projects.

Notepad++: This text editor is a big step up from Notepad; still pretty lightweight, but it adds on a bunch of features that Notepad lacks. Multiple files can be opened at once and navigable through tabs, and coding is made simpler through syntax highlighting, spell checking, line numbers, etc. For a free text editor that has so many more features over regular old Notepad, it’s very much worth the download.

Sublime Text 2: Sublime has all the features of Notepad++, but with so much more added onto it. Viewing tabbed files side-by-side within the same window is a breeze (useful if you’re trying to compare code between files), and you can even open entire projects in the editor and preview each file with the directory structure outlined beside the editor. There are even some nice-to-have features such as a customizable interface, and a “distraction-free” mode that allows you to enter a full-screen view of the editor, removing sidebars, tabs, and other possible distractions. Best of all, Sublime is a text editor that also works on Mac, so users can work seamlessly between Mac and PC.

Out of these three text editors, you could argue that Sublime Text 2 beats out Notepad and Notepad++ simply because it offers more features than the other two, and I probably wouldn’t disagree with you. Yet, again it is about the size of your project and what you need to accomplish your tasks; if you’re working with a small project and just need some basic functionality to get things going, stick with your already-installed Notepad, but if you’re working on a large-scale project that demands organization, consider Notepad++ or Sublime.

Sources: [ Notepad++ ], [ Comparison of Text Editors ]

Text Editors for Mac: Part 1

When writing code for a website, you need to use an editor that works best for you so that you’re able to produce your work the most efficiently. This week I’ll be doing a quick comparison of three common editors designed for Mac computers, and hopefully this will help you in your decision-making process.

TextEdit TextWrangler TextMate*
Price Free Free $50
Open Source Yes No No
Syntax Highlighting No Yes Yes
Find and Replace Yes Yes Yes
Bracket Matching No Yes Yes
Auto Indention No Yes Yes
Auto Completion No No Yes
Spell Checking Yes Yes Yes

* The version of TextMate being evaluated is version 1.5.11, not 2.0 beta
** Table provided by findthebest-sw.com

TextEdit: If you own a Mac computer, chances are you have TextEdit already in your applications folder! For a text editor it’s functionality is very basic, so if you’re looking for advanced features this one may disappoint you. However, if you’re looking to quickly review a file or just plan on doing very simple coding, this free application should work just fine (and it has worked for me for two years).

TextWrangler: When my projects became too big to manage in TextEdit, TextWrangler was the application I switched to. It’s much easier to manage multiple files (they’re all navigable in one window as opposed to TextEdit where files are opened in their own separate windows), each line is marked by a number, and it auto-indents to help with organization. My favorite features about this program, however, is how it color-codes the syntax and how it will let you know if brackets don’t match. This has stopped me numerous times from making simple errors, saving me hours of frustrating debugging. And it’s free!

TextMate: I don’t have personal experience using this one, so I had to do a bit of research on it. Out of the three text editors talked about here it has the most features, such as the auto-complete and code-folding functions the other two lack. Whereas TextWrangler only warns you of mismatched brackets, TextMate will actually insert it for you so you don’t even have to worry about it. Another step up that it has over TextWrangler is the project manager feature; whereas TextWrangler simply lets you have multiple files open at once in one window, TextMate actually lets you view whole directories so you can see how your files are organized. However, TextMate does come with a price tag, so it’s up to you to decide whether it’s worth the investment.

You can think of these applications as existing on a continuum: TextEdit is for simple projects, TextWrangler is for slightly more complex projects, and TextMate is for large-scale, complex projects. Which editor is right for you depends on the complexity of your project, and maybe you’ll find that you’ll use more than one!

Sources: [ FindTheBest ], [ TextMate: The Missing Editor ]

Serif vs. Sans-Serif Fonts

One very often debated topic in web design is which font face is best: serif or sans-serif? Is there really any difference?

Serif fonts have small decorative flourishes, small tails that extend from the edges of the letters. Sans-serif, as you would expect, do not have these little tails (in fact, “sans” pretty much means “without”). Some of the most prominent examples of both types is Times New Roman for serif and Arial for sans-serif (as shown in the image below).

sans versus sans-serif

 

Arguments have been made for why one font type is superior over the other in different applications. For serif, it has been said that the small tails help to guide the eye from one letter to the next, helping to increase contrast and spacing between letters to make them more distinctive. This makes serif typefaces ideal for body text where eye fatigue could be an issue. Sans-serif fonts, on the other hand, are said to be great for adding emphasis to words and are very scalable. Since it retains its general shape at any size its ideal for when a design calls for small font sizes, whereas serif fonts tend to become a little blurry at smaller sizes due to those little tails that does not scale as well. This makes sans-serif fonts good for small disclaimers, tables, captions, and headings.

However, there are still some arguments that these ideas have not been thoroughly tested, and after some further testing there is actually no difference between serif and sans-serif as far as legibility and readability is concerned. It’s up to you whether or not you believe these ideas or not, but there is something that you SHOULD consider: what kind of experience do you want your user to have when they are visiting your website?

Things you should keep in mind when picking a font type are things like color and contrast, size, and style. Carrie Cousins of Design Shack comments that serif font tends to feel more “classic, elegant, formal, confident and established”, while sans-serif is more associated with “modern, friendly, direct,  clean and minimal” feelings. What font you decide on should be based on what your options are and its application. Serif fonts can be simple or decorative, curved or blocky, while sans-serif fonts can be sharp or rounded, and more often than not, your website will benefit from incorporating both types. The best thing you can do is explore your options, and test them on real users.

 

Sources: [ Serif vs. Sans: The Final Battle ], [ Serif vs. Sans Serif: Is One Really Better than the Other? ]