Mobile Articles, Blog Posts, Resources, etc. from Work and Home Computer Bookmarks

Two people over a week ago asked me for mobile resources one for checking accessibility on mobile devices and the other for general information, so I figured I would publish them for all to see. Here are a bunch of resources from my work bookmarks, along with even more from my home laptop. A bunch of these articles, blog post, etc. are five or six years old, but the ideas and concepts are still worth reading.

UPDATED broken and redirected links – 01/02/2017.

The information is grouped together by the organization or person that wrote them.

BBC Mobile

Henny Swan

Paul Adam – this mobile resources page has a lot of links on it

Marcy Sutton

Luke Wroblewski

Apple – iOS

Videos

Android

Brad Frost

Jason Grigsby

Brian Fling

SSB Bart Group

Rachel Andrew

PPK

jQuery

Miscellaneous Mobile Accessibility

Hopefully, some or all these were helpful to you.

Test HTML and CSS Based Organizational Charts

I was playing around a few months go create the best way to build an organizational chart that are accessible and thought it was time to publish this blog post. So I created what I’m hoping is an accessible organizational charts page. The charts are text based, and I hope they make sense visually as well to assistive technology users like screen readers.

The first chart is built using nested definition lists (DL), which are styled with CSS to show visually which groups or people fall under other groups or people. The second example organizational chart is built using structured headings. These were indented by adding CSS classes to make them easier to read and understand the organizational hierarchy visually.

I’m hoping creating organizational charts one of these ways work. I’m thinking by making organizational charts this way might not work out well if you have a large organization, but could be useful to smaller teams or companies.

If you use assistive technology can you please tell me if these organizational charts are helpful in conveying an organization’s structure.

2014 = FOCUS

No, New Year’s resolutions for this guy, but this year’s theme will be “FOCUS”. Themes is an idea, which was taken from Jared Goralnick’s blog posts from a few years ago:

Instead of doing New Year’s resolutions, which I haven’t done in decades I’m going to spend an extra five hours a week minim, hopefully at least ten hours, a week on a given subject for a month or more depending on the amount of knowledge gathering needed for a given subject. More time will be spent each week if my schedule happens to allow for more, but at least five hours a week, which will make over 250 extra hours of training over the course of the year. The week will start on Monday and ending Sunday night, which allows me the opportunity to either catch-up on the weekends of add more hours for that week.

Plan for Spending My Time

I will spend the first two to three hours per month writing down more details of what and how I’m going to spend my time learning that month. The months focus maybe to spend the next five or ten hours reading blog posts, books, etc. on a given subject before diving in to learn and work on a given subject. Or it might be to spend an hours reading a book, blog post or whatever and then another hour or to doing something like coding or painting.

Will also need to spend and extra hour or two towards the end of each month contacting people that are smart and know more about a given subject for recommendations on what to read and anything else I will need to stay focused on the next month’s subject. This time spent asking questions, for help, or recommendations will not be part of the hours each week/month focusing on a given subject.

I want to spend at least four full weeks on the subject. If the month starts or ends somewhere in the middle of the week, I will need to decide if I have learned enough or if I should spend and extra day or so continuing to learn or move on to the next subject/area of focus.

Topics of FOCUS

A lot of the topics I’m going to be focusing on for one month will hopefully help prepare me for the next month and be able to be improved upon and use this whole time. By the time, I get into the months of August and September (PHP), October and November (mySQL), and finally December these focus areas are going to get me closer to finishing my web based event registration application Hold An Event or at least build something a little less complicated, so I have some kind of finished project by the end of 2014.

Below are the months and what subject I plan on focusing on during a given amount of time. Some subjects span a few months because I have determined that to learn anything useful I will need to focus on them for a longer amount of time. Under each month/topic of focus is a list of things I can think of now that I want to focus on with more to be added at the beginning of each month or as I delve deeper into a subject.

January – Improve My Writing

  • Start with doing a bunch of reading on how to improve my writing and grammar.
  • Create outlines for some writing examples.
  • Next will be outlines of blog posts, slide presentations, etc.
  • Write short blog posts or stories to get more practice in .
  • Write Hold An Event content from the perspective of first time user/visitor to website/application.

February – Creativity, Inspiration, and Passion

  • Read about how to be more creativity, inspired, and passionate.
  • On the weekend or weekday night take a trip to the National Gallery or Art.
  • Take a bus road trip to NYC to visit MoMA or one of the other museums.
  • Spend time painting.
  • Watch YouTube videos to learn how to play the guitar.
  • Take a guitar lesson or two.
  • Do some sketching on iPad using Paper from 53 of new “I Gotta Eat Here” web application.

March – Learn Git, along with Github

  • Learn Git.
  • Learn Github.
  • Practice starting with:
    • Improving my website content.
    • Update blog posts for grammar and spelling issues.
    • HTML code, JavaScript, CSS, etc:
      • Improve or remove obsolete code.
      • Delete commented out code.
      • Make pages responsive.
  • Add META data to web pages.
  • Continue to improve my writing by re-writing website content for:
  • Accessibility improvements need to be made in the process of learning Git.

April – Learn More about Accessibility

  • Some subjects include ARIA, JAWS, Dragon Naturally Speaking, VoiceOver, etc.
  • Use accessibility information gained at CSUN to start working on being a better developer.
  • Focus on improving my knowledge about ARIA/accessibility issues the better I will be at building websites, web applications, and making JavaScript/jQuery items more accessible.

May – Better Health

Originally had this January as everyone does to start the year out on the right foot and decided, since that usually doesn’t work, why not try it later on. This allows me to focus on other subjects during the colder months and start with health once ti gets warmer, since I tend to like to walk as my exercise.

  • Starting with food (better choices, smaller portions, etc.).
  • Exercise more by walking after work and on weekends.
  • Work on having more energy to be able to stay up late to work on Hold An Event later on down the road and still feel rested.
  • Create easy ways to cook and prepare healthy meals.
  • Decide how many days during given a week I should cook/prepare my own meals.
  • Decide how to have me to bring my own healthy food to work for lunch, which saves me money.

June and July – Javascript/jQuery

  • Find best book(s), video tutorials, or blog posts to learn JavaScript.
  • Learn JavaScript and to start with the basics, maybe with Jeremy Keith’s book (DOM Scripting), if it’s still a good resource, which will make understanding and fixing jQuery issues easier.
  • Learn jQuery, since most websites now a days use it to perform their JavaScript functionality.
  • Create accessible examples, along with ARIA, error messages, etc. examples for others to use.

August and September – PHP

  • Learn the best way to optimize code.
  • Create ways to read different parts of the database by changing parms.
  • Create API to use to create, read, update, and delete records.

October and November – mySQL

  • Create databases.
  • Write new records.
  • Update/delete record (not really deleted, but mark as done using date so I will know when record was deleted).
  • Find the best way to optimize database to get information as quickly as possible.

December – Security

  • Stop denial of service.
  • Look into protecting data, but mostly user information.
  • Figure out how to add SSL to website, along with cost per year, etc.

In Conclusion

After each month, I will write a blog post to continue to improve my writing, along with explaining what books, blog posts, videos, etc. I read or watched to help me focus on that months subject. Will also rate myself on how I thought I did with a given subject and if I truly learned anything, long with to tell everyone how many hours I managed to focus on that months subject for.

So this year I plan to “FOCUS” on monthly topics and hope to be better and more knowledgeable person by the end of 2014.

What are you planning to accomplish in 2014?

How to Improve Your Search Usability

Doing searches on websites is a pain when you are using assistive technology. There are ways to improve how you get to the results.

Why not add an HREF anchor like #maincontent, which we used for the “Skip Navigation” article to your “Search Results URL” so those using screen readers, other assistive technologies, keyboards only, or other non desktop web browsers to skip right to the results section of the page skipping all the header, primary navigation links, and secondary navigation, etc.

You also need to make sure you have a LABEL connected to your search box for screen reader and other assistive technology users to know what they are looking at. Below is some sample code you can use as a starting point, along with some CSS to hide the search LABEL visually off screen if your design calls for that kind of things.

Search Form Code

<div class=”SEARCH“>
<form name=”Skills_Search” action=”searchResults.html#MAINCONTENT“>
<label for=”search2“>Search</label>
<input type=”text” name=”search2″ id=”search2” />
<input type=”submit” value=”Search” />
</form>
</div>

Results of Search Code



To hide the word “Search“ just add to the hide class used for the skip navigation blog post this can be done easily by adding “.search label” to the CSS.

Here’s a live example of the search box and search results example page.

Hope this little change to your website was helpful to you and it will make accessing the internet for those using assistive technologies better.

If you have any questions or ways to improve this, please leave a comment or get in touch with me.

How to Hide “Required” from Visual Users, but Make it Available for All Others

How do most people usually designate that a field is “Required” in a web FORM? I would think that it is with an asterisk (*) after the actual INPUT field and it is sometimes made “bold” and “RED”. There are other ways to do this that are simple, use web standards, good design principles, and are 508 compliant.

When creating a FORM you should not make all fields required. By doing that nothing stands out to the person filling in your very important FORM. If most fields are required you should state at the top of the FORM or in the directions the fields that are NOT required.

Instead of just placing an asterisks after either the LABEL or the INPUT field in a FORM for a required field as most people do. You can actually place the word “Required” within the LABEL. Of course your using LABELs for your FORMS, along with FIELDSETs and LEGENDs.

Here is how to accomplish this for a web FORM and it can be easily accomplished by using a little CSS to hide the text that a field is “Required” to be filled in. The way to do this, that I use is to make it part your input fields LABEL. Here is an example of a few lines of code on how the code might look.

<label for=“username”><em>Required<em>User Name</label>

To hide the word“Required” you will be able to use the same CSS used for hiding “SKIP NAVIGATION” by adding a new class or stating that LABELs with an “EM“ in them will be displayed.hidden off the page.

Reminder please do not use “DISPLAY: NONE” in your CSS, since screen readers will not see it. Below is the CSS to visually hide the word “Required” from browsers.

.skip a, .skip a:hover, .skip a:visited, label em {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” minus 10,000 pixels and a “TOP” position of auto. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers. That is as long as their CSS in turned on.

You can also place extra notes or instructions for a field inside the INPUT field with lighter text that is that will not go away once you start typing in the field. This can be done by using more CSS. Below is the XHTML code to accomplish this.

<label for=“username”><em>Required<em>User Name<strong>must not contain spaces<strong></label>

<input type=“text” name=“username” id=“username” size=“25” maxlength=“50” value=“”/>

The CSS to do this is fairly simple and follows below.

label strong {
color: #aaa;
font-size: .85em;
font-style: normal;
position: absolute;
top: 0;
right: -275px;}

Here is what the CSS is doing for the extra notes and instructions. It is first taking any STRONG elements within the LABEL and making it light gray color, the FONT-SIZE smaller and normal weight. After that it is absolutely positioned at the top left of the INPUT FORM field, as long as the LABEL is left or right justified to it and finally placing the information negative 275 pixels from the right of the beginning of the INPUT field.

Don’t forget to listen to your FORMs by using the Firefox extension Fire Vox. Here is an example how placing extra notes or instructions would look in a FORM, along with some “Required” field examples.

I hope this post is useful and further explains how to hide visual the word “Required” from my Accessibility presentation “Is your Website Accessible?”, please look for the most current presentation closer to the top of the list.