About Theme company

Theme company's Features And Specifications

I think you can use in many site, If you change picture and text.

It's shipped with Sample Content.

May be Can easily build accessible site, if You install theme with Sample Content.
(You must to described src="image's root" alt="image of description", if image part is html block.)

It use drawer menu with WAI-ARIA, In the width less than 785px.
(I improve little bit it for more accessible.)

Keyboard focus move in the only global navigation to select menu or "×" button, When open the drawer menu.

It's use Microdata for machine readable Schema.org.

It's markups global navigation,breadcrumb list,what's new,q&a, according to the specifications of schema.org.

Fixed header for possible to quickly touch the navigation menu when the scroll in the smartphone.
(Please set (Case jump destination is #top.)example:margin-top:100px;padding-top:100px;) When You set link in page.)

Please note that the layout is likely to collapse or get an horizontal scroll bar by device smaller than it, If there is absolute in width of LikeBox etc.
(Please adjust the width on your own.)

The Main Area has been to 2 column (Col Twobox) 3 column (Col Threebox) can to set original custom layout.

About Accessibility Conforms of Theme Company

Text color contrast ratio with the background color conforms the criteria (level AA) 1.4.3 of WCAG 2.0.

It conforms success criteria for keyboard operation the criteria (level A) 2.1.1 of WCAG 2.0.
(Accordion and tab menu parts of jQuery UI move with the arrow keys.)

This theme have set up a navigation skip.
(It is displayed by pressing the Tab key after displaying the page.)
Skip navigation not read by the screen readers and non-display, When it use drawer menu in the width less than 785px.

Opening and closing button (icon) part of drawer menu has displayed visual 「menu」and 「close」by the css, has been set to read "navigation menu" by the screen readers.
A element use as Button element provides information by using the WAI-ARIA.

The state of the opening and closing of the drawer menu provides information using the aria-expanded attribute.

In the screen reader that support to the aria-expanded attribute, It reads "folded" or "expaned" when you focus on opening and closing button.

Does not read in screen readers and visually no display when global navigation are closed (use drawer menu) .
And the indicates not displayed to using aria-hidden="true".
It has created a clone at the page bottom when global navigation are closed(use drawer menu) does not read in screen readers and visually no display.
Clone is read with screen readers, but does not appear in the visual.

Version 1.1.0 in this theme add accessible dropdown menu with WAI-ARIA to global navigation when screen size is 1165px or more. (Supports up to the second hierarchy level(one sub menu))

Version 1.0.2 in this theme added aria-current attribute to the menu selected in the global menu.

Content parts use ARIA tab interface and ARIA accordion interface.(jQuery UI - v1.11.4)I removed role="presentation" of a element from the result that I verified how to read many ARIA tab interface example by screen readers.

About Confirmation Display

concrete5.7.5.9~, 8.0.0~8.3.2

  • OS:Windows 7
    • Internet Explorer11,10,9(include when zoom 200% and text size "large", "maximum")
    • Firefox50.0(include when  zoom 200%  and change only text size×4)
    • GoogleChrome54.0.2840.99(include when  zoom 200%)
  • OS:Windows 10
    • Edge(include when zoom 200%)
    • Firefox50.0(include when  zoom 200%  and change only text size×4)
    • GoogleChrome53.0.2785.143(include when  zoom 200%)
  • OS:Mac OS Sierra 10.12.1
    • Safari10.0.1(include when  zoom 200%)
    • Firefox50.0(include when  zoom 200%  and change only text size×3)
    • GoogleChrome54.0.2840.98(include when  zoom 200%)
  • Tablet:
    • iPad iOS 9.3.5 Safari
  • Smartphone:
    • GALAXY Android5.0.1 Standard browser、GoogleChrome54.0.2840.85
    • iPhone5s iOS 10.1.1 Safari

About Check Reading Of The Screen Readers

  • PC-Talker 7 + Win7 Internet Explorer11
  • NVDA 2016.3jp + Win7 Firefox50.0
  • Voice Over + iPod touch iOS 9.3.5
  • TalkBack5.0.4.3 + GALAXY Android5.0.1

Have To Fix Other Than The Theme

Change from %1$s :: %2$s to %2$s :: %1$s on line 868 in concrete/config/concrete.php.

Please refer to it - How to change the default "site name :: page title" formatting in 5.7

You don't need change from concrete5 Ver.8. Because it set [PAGE NAME :: SITE NAME] by default.
Please refer to it - Switch Site name and page title on default by katzueno · Pull Request #3801 · concrete5/concrete5 · GitHub

About Style Custom

  1. image-frame - Add the border, such as the frame in the image
  2. left-justify - It is aligned left in the article, etc.(wraparound of text)
  3. list-mark - Add an icon, such as the list of What's New in the top page.
  4. company-btn - Light blue button style.
  5. company-title - Same to h1 style of the lower page.

About Area Custom Classes


  1. list-mark - Add an icon, such as the list of What's New in the top page.
  2. company-btn - Light blue button style.

Footer Nav AREA

  1. subnav-link - To side-by-side.
  2. list-mark - Add an icon, such as the list of What's New in the top page.
  3. company-btn - Light blue button style.

About Custom Templates For Block

  1. company_responsive_header_navigation - Use autonav for global navigation.
  2. company_breadcrumb - Use autonav for breadcrumb navigation.
  3. company_new_info - Use page list for what's new.
  4. company_list - Use page list for side block of blog pagetype.
  5. company_thumbnail - Use page list for page list with a thumbnail for side block of blog pagetype.
    (please set the thumbnail in the composer's blog entry page type of the management screen for display the thumbnail image.)
  6. company_faq - Use faq for FAQ's accordion parts.
  7. company_page_title - Use page title for page title parts.
  8. company_blog_title - Use page title for blog title parts.
  9. company_search - Use search for side block of blog pagetype.
  10. company_date_navigation - Use date navigation for side block of blog pagetype.
  11. company_next_previous - Use next previous for side block of blog pagetype.
  12. company_topic_list - Use topic list for side block of blog pagetype.