One of the projects we have been working on for a while is Digital Asset Management. Our photo team had evaluated several commercial products, and found that most, if not all, of them were too expensive for us to be able to afford as a single division. We therefore shifted gears and started looking at some of the open source solutions.
As we went through this process we found others on campus who were also looking at the same problem. Last week I sent a note out the the campus communicators’ list asking for feedback of who might be interested in getting a team together to investigate a central service. I was overwhelmed by the results; over twenty colleges, departments, or offices expressed an interest in joining.
In order to facilitate communication on this effort I have set up a local listserv list. If anyone would like to participate in the conversation please contact me and I can get you added to the list.
I look forward to this becoming a successful shared service that can befit the entire campus community.
Some takeways from Jared Smith’s ARIA Gone Even Wilder session at the Environment for Humans Accessibility Summit.
ARIA stands for Accessible Rich Internet Applications. As Jared Smith explains, “ARIA allows us to expand the vocabulary of HTML to include things that screen readers already understand.”
To do this, web developers use HTML tags and attributes. Probably the most important of these attributes is
role, but there are many others, such as
Most HTML5 tags have default ARIA roles. For example, an
h1 tag automatically has the ARIA role of ‘heading’. Use HTML, then use ARIA to fill in the gaps.
Roles don’t change browser behavior. That is, giving a
button doesn’t make it act like a
span act like a
button (clickable, etc.) If not, it will require overhead/orientation for everyone, to teach them how to use your widget. You don’t need to duplicate native roles. If you define a button using the
button tag, you won’t have to worry about faking it.
ARIA supports a lot of user interface widgets (such as menu, slider, checkbox), and users need to learn how to use them. They may know tab only and not arrow keys. What if you do it right and they don’t understand? Should we break the rules/standards? No.
Common misunderstandings about ARIA roles:
- Navs are rarely menus! Menus are File-Edit-View etc.
- Lists are rarely a listbox. Listbox is a select menu.
- Tables are rarely grids. Grids are interactive.
- Dynamic content is rarely a live region (aria-live=”assertive”) If focus is set to it, it isn’t a live region.
- Important information is rarely an alert. Alerts are read immediately.
- Not all groups of links are navigation. Navigation lets you move within a page or across the site. Social icons are not navigation.
- jQuery dialogs always have role=dialog regardless of their content, which makes them mostly inaccessible.
Navigation by type is not yet widely available. You can’t jump to it. Landmarks are usually identified anyway. It would be great for browsers to support keyboard navigation by structural elements (headings, nav, main) and ARIA landmarks. Then we wouldn’t need skip links.
Landmarks and labels
You can use aria-label or aria-labeledby to differentiate multiple landmarks of the same type.
Labels vs. descriptions: label is necessary, description is advisory
There is no aria-description, since aria-labeledby is better. It might be read twice if it’s already in context.
ARIA labels replace the link and label text. So a screenreader reads aria-label=”PDF” instead.
Use off-screen or aria-described by.
Ensure labels are on the focusable element, not parent or child or container.
HTML input attributes, however, can change behavior.
Users assume that if you can tab to it, you can interact with it. Don’t put tabindex=0 on text, only on links and buttons.
ARIA roles are an example of progressive enhancement – usually you can’t make your website less accessible by using ARIA (though it’s possible if you do it wrong), but older browsers might not see the newer attributes.
Last fall I joined the W3C‘s Responsive Images Community Group after being inspired by (and having lunch with) Mat “Wilto” Marquis, the group’s chair, when he spoke at An Event Apart in Austin. The RICG calls itself “a group of independent designers and developers working toward new web standards that will build fast, accessible, responsive websites.” Mostly my contributions have been limited to fixing typos on Github and making wisecracks on IRC, but I’m pleased to have contributed to the newly-released RICG Responsive Images WordPress plugin. (Technically, I added support for PHP 5.3 and below, versions which don’t support function array dereferencing.)
The RICG’s first achievement was to push through a new HTML element –
picture – along with its friends
sizes. These allow web developers to offer images in various sizes and let the browser decide the best one to use. A retina phone can display the 2X retina image, an older feature phone can display a little 200px image, and your ultra-wide monitor can display a full-bleed 1920×1080 image. Best of all, the browser only downloads the image it needs – no double download.
I consider responsive images a perfect example of progressive enhancement - fully supported on Chrome and Opera, and partially supported in Webkit and Firefox. Even Microsoft is working on adding these features to
Internet Explorer its new browser. And the Picturefill script adds responsive images capabilities to any browser. Until now, responsive web developers like me have been sending oversized images to be squeezed onto little phones, wasting much of our users’ bandwidth. Mat Marquis says that people in Africa actually have to keep lists of which websites they can’t visit without draining their entire monthly bandwidth. So if we use responsive images when someone’s mobile browser doesn’t support them, the user experience will be no worse off. But if the browser does, his or her experience will be much faster and more pleasant. An image on a mobile phone might only need to be 1/5 the size in kilobytes of an image on a typical laptop.
The WordPress plugin is a first step to adding responsive images to the core of WordPress itself. When that happens, webmasters of 60 million websites can upload large, clear images, and their visitors will only download the image size they need. The plugin comes bundled with Picturefill, and since WordPress already keeps track of multiple image sizes automatically, the future looks good.
We went live earlier this week with our first major site of the year. The university news & information page, formerly known as TAMU Times, has been rebranded to Texas A&M Today. The accompanying email has also been rebranded, and successfully sent out on Wednesday.
This project was one of our major efforts for the Fall semester. It was a substantial challenge, because we had to not only build the site looking forward, but had to make the last several years of content from the current site compatible with the new version.
Many of the features of this site won’t be immediately visible. Rather than creating Texas A&M Today in a vacuum, the site was designed to integrate into our whole set of web properties. As our other sites get developed and rolled out you will how they increasingly rely on and support our other sites.
You are invited to attend the new Texas A&M University System Technology Summit (formerly the TTVN conference) February 10-13, 2015 in Galveston, Texas. The Technology Summit is open to all Texas A&M University System employees and features 32 interactive sessions in four tracks:
- General IT: sessions include Zero day threats, Managing Macs, DevOps, eSignatures;
- Learning Technologies: sessions include Mobile technology in class, Learning analytics, Next gen learning spaces;
- Web: sessions include Mobile first, Continuous integration and testing, Usability; and
- Shared Services: Syncplicity, Digital signage, Two factor authentication, and 5 more sessions.
Additionally, we will hear from both the System Digital Media Center of Excellence and the System Council on Academic Technology and Innovative Education. The Summit is designed to give you plenty of time to network with your colleagues around the System, speakers, and our exhibitors.
There are three pre-Summit workshops on IPv6, mobile site development, and effective teaching available at an additional charge.
Register before February 1, 2015 to get the early-registration rate and be entered for the chance to win an iPad.
For details and registration information, visit http://techsummit.tamu.edu.
We hope to see you there!
Thank you to those who attended yesterday’s presentation, whether in person on over TTVN. We apologize for the technical difficulties in getting the slides to show properly. Ellen has sent me the presentation, and I have uploaded it to Slideshare.
The Division of Marketing & Communications has moved! This is our first full week in the new offices. Half of our stuff is still in boxes and scattered across floors and desks, but this is going to be a good change for us once we get settled in. While there was some trepidation about how things would work out, I have already seen increased collaboration and communication between people who had not worked often (or well!) together. Once everything gets unpacked, installed, and configured, we should have an amazing space.
The down side to all of this has been that the move has affected everyone’s projects and schedules. We should be getting back on track quickly though, and have some of or projects finished be fore leaving for the holiday break.
As most of you know by now, we are currently working on the next version of the university website. We will be using this site a cornerstone for much of the work we do moving forward. One of the elements that will be affected is how we build sites. Currently we develop all of our CSS and responsive page looks by hand-writing our styles and setting our own media queries and break points. Starting with the new site we will be shifting over to developing with the Foundation framework.
This is a big change for us, and frankly one that I am not yet wholly comfortable with. Perhaps it is a generational thing, but I have never liked frameworks, or at least the modern interpretation of the term. Rather than being a basic scheme upon which to build your own creation, modern frameworks push you down a pre-determined path – and deviation from that path can be difficult. The GoMobile team even had a term for this, calling such sites “Bootstrappy.” Further, because these frameworks try to be all things for all sites, the HTML and CSS required to use them can get enormously bloated. (See Michael’s previous post on how to combat this.)
So, if we have a framework that we have to go to pains to override, and which includes a CSS file that is bigger than the entire page (including images!) should be, why did we decide to use it?
First, we wanted to create a standard that would be consistent across all of our sites. While we have always been diligent about trying to remain consistent in the way we wrote our code, we inevitably failed. Every site had its own production cycle which systematically led to each site being different. Even when two sites called for the same effect it often turned out to be done differently on each site. Standardization will let us resolve this issues, and thereby let us more easily maintain multiple sites.
We, both as a division and as a university, are experiencing increased staff turnover. As new people come in it is easier for them to learn and maintain our sites if they are built on a standard codebase.
Probably most important, the multitude of new devices makes keeping up with technology easier when using a framework. With new phones and tablets being released each month, and the ever changing capabilities of these devices, the framework makes it easier to maintain cross-platform support. We no longer have to worry about knowing the latest specs on every device and knowing how to update our code based on those changes. Any needed updates can by incorporated through keeping the framework up to date as needed.
One thing that we have seen in adopting this new methodology is that you can’t follow the framework’s code to the letter. It is a framework after all, which by definition is something that is there to support your code…not to determine it. Don’t try to do everything within the framework’s code — don’t fight it and look for ways to circumvent it — but don’t hesitate to write your own styles on top of it.
So what does that mean for me personally? I recently started editing a site that had already been built on Bootstrap and I honestly started reverting to what I knew, making hacks and overrides to effect the changes I wanted. It is going to be a hard transition — probably on the order of moving from tables to CSS for site layout — but it is a necessary transition in order to remain current and relevant in our field.
We now have a new time and date for the uweb presentation on server exploits. For a brief reminder of topic highlights, see our previous post.
The presentation will now be Tuesday, December 9 at 3:00. For those wishing to attend the live event, we will be in Room 2605 of the General Services Complex. The presentation will also be broadcast over TTVN on Channel 6. (Reminder again for Mac users to see TTVN’s instructions for getting connected at http://ttvn.tamu.edu/Index.php?p=Streams#mac)
We’ve begun using the Zurb Foundation framework, which includes a 176K stylesheet of everything that you might need just in case you need it. Well, for a recent one-page site, I guess that we probably wouldn’t need very much, so I sought ways to strip out unused CSS. How much could I shrink the 176K CSS file without breaking the page?
- Dust-Me Selectors - a Firefox extension that reduced it to 18k, with no noticeable differences in the performance of the page. Unused code could be commented out, or removed altogether.
- mincss - a Github project that reduced it to a responsive 10.5K, but the responsive slider stopped working.
- unused-css – a commercial service that reduced it to 73.8k. It removed most of the code from the media queries, so the page was no longer responsive, but the slider still worked.
- Chrome Developer Tools – told me how many unused CSS rules I had, but doesn’t produce a cleaned version.
As you can guess, your mileage may vary. Some tools will flag redundant CSS but not unused CSS, or removes code that is only used at certain screen widths, or don’t work with LESS/SASS. But Dust-Me Selectors worked fine for me, for now.